/*
 * Copyright 2018 Expedia Group
 *
 *       Licensed under the Apache License, Version 2.0 (the "License");
 *       you may not use this file except in compliance with the License.
 *       You may obtain a copy of the License at
 *
 *           http://www.apache.org/licenses/LICENSE-2.0
 *
 *       Unless required by applicable law or agreed to in writing, software
 *       distributed under the License is distributed on an "AS IS" BASIS,
 *       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *       See the License for the specific language governing permissions and
 *       limitations under the License.
 *
 */

@import (reference) '../../../app';

// TODO use grid system instead of flex
.search-bar-headers {
  display: flex;
  margin-bottom: @spacing-xs;
  white-space: nowrap;
}

.search-bar-headers_service {
  flex: none;
  width: 200px;
}

.search-bar-headers_operation {
  flex: none;
  width: 300px;
}

.Select-menu-outer {
  border: 1px solid @gray-dark;
  border-top: 0;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}

// TODO use grid system instead of flex
.search-bar-pickers {
  display: flex;
  border: 1px solid @gray-light;
  border-radius: 3px;
  background-color: white;

    // TODO Move Select in a separate shared file instead of keeping with home's styling
    // increasing specificity to override default by bootstrap
  .Select {
    font-family: @font-family-monospace;
    font-size: @font-size-base;
    .Select-value-label {
      color: @gray-darker !important;
    }

    .Select-control {
      color: @gray-darker !important;
      padding: 4px 0 4px 0;
      box-shadow: none;

      &:hover {
        box-shadow: inset 0 -2px 0 @brand-primary;
      }
    }

    .Select-value {
      padding-top: 4px;
    }
  }

  .search-bar-text-box {
    width: 100%;
    padding-left: @spacing-s;
    font-size: @font-size-base;
    font-family: @font-family-monospace;
    line-height: 42px;
    box-shadow: none;

    &:focus {
      outline:none;
    }
  }
}

.search-bar-pickers_service {
  flex: none;
  width: 200px;
  border-right: 2px solid @gray-mid-lighter;
}

.search-bar-pickers_operation {
  flex: none;
  width: 300px;
  border-right: 2px solid @gray-mid-lighter;
}

.search-bar-pickers_fields {
  flex-grow: 1;
}

.search-bar-pickers_time-window {
  flex: none;
  align-self: flex-end;
  position: relative;
}

.traces-search-button {
  border-radius: 0;
}

.search-bar-pickers_submit {
  flex: none;
  align-self: flex-end;
}

.time-range-picker-toggle {
  border-radius: 0 !important;
  font-size: @font-size-base !important;
  line-height: 24px;
  text-transform: capitalize;
}

.traces-error-message {
  display: inline-block;
  padding-top: @spacing-xs;
  color: @brand-danger;
  font-weight: 600;
}

.traces-error-message__code {
  font-family: @font-family-monospace;
  font-size: @font-size-small;
  margin-left: @spacing-xs;
  font-weight: 600;
}

.autosuggestion-box {
  position: relative;
}

.autofill-suggestions {
  position: absolute;
  top: 42px;
  width: 280px;
  margin: 0;
  padding: 0;
  border: 1px solid @gray-dark;
  border-top: 0;
  max-height: 400px;
  overflow-y: scroll;
  background-color: white;
  font-size: @font-size-base;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  z-index: 2;
  list-style-type: none;
  cursor: pointer;
  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
  font-family: @font-family-monospace;
  line-height: 42px;
}

.autofill-suggestion {
  padding-left: @padding-base-horizontal;
}

.active-suggestion {
  background-color: #EAEDF3;
}